<template>
    <div>
        <div style="text-align: center; margin-top: 30px;">
            <span style="font-family: 隶书;font-size: 30px">个人资料详情</span>
        </div>
        <div style="margin-top: 30px;">
            <el-form style="margin-left: 15%; margin-right:20%;padding: 20px ;border: skyblue 2px solid;border-radius: 50px"
                     width="70px" ref="form" :disabled="disabled" :model="form" label-width="100px">

                <!-- 头像 -->
                <el-form-item label="头像" prop="picture">
                    <img v-model="form.picture" :src="form.picture" width="100px" height="100px" style="border-radius: 50%;margin: 0">
                </el-form-item>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="姓名" prop="userName">
                            <el-input v-model="form.userName" style="width:240px" placeholder="请输入用户名称" clearable size="small" />
                        </el-form-item></el-col>
                    <el-col :span="12">
                        <el-form-item label="手机号" prop="phone">
                            <el-input  v-model="form.phone" style="width:240px" placeholder="请输入手机号，作为登陆凭证" clearable size="small" />
                        </el-form-item></el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="所属科室" prop="deptId">
                            <el-select
                                    v-model="form.deptId"
                                    placeholder="所属科室"
                                    clearable
                                    size="small"
                                    style="width:240px">
                                <el-option
                                        v-for="d in deptOptions"
                                        :key="d.deptId"
                                        :label="d.deptName"
                                        :value="d.deptId"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="级别" prop="userRank">
                            <el-select
                                    v-model="form.userRank"
                                    placeholder="用户级别"
                                    clearable
                                    size="small"
                                    style="width:240px">
                                <el-option
                                        v-for="d in levelOptions"
                                        :key="d.dictValue"
                                        :label="d.dictLabel"
                                        :value="d.dictValue"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="年龄" prop="age">
                            <el-input v-model="form.age" style="width:240px" size="small" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="背景" prop="background">
                            <el-select
                                    v-model="form.background"
                                    placeholder="学历"
                                    clearable
                                    size="small"
                                    style="width:240px">
                                <el-option
                                        v-for="d in backgroundOptions"
                                        :key="d.dictValue"
                                        :label="d.dictLabel"
                                        :value="d.dictValue"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="性别" prop="sex">
                            <el-radio-group v-model="form.sex">
                                <el-radio
                                        v-for="d in sexOptions"
                                        :key="d.dictValue"
                                        :label="d.dictValue"
                                        :value="d.dictValue">{{ d.dictLabel }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="状态" prop="status">
                            <el-radio-group v-model="form.status">
                                <el-radio
                                        v-for="dict in statusOptions"
                                        :key="dict.dictValue"
                                        :label="dict.dictValue"
                                        :value="dict.dictValue">{{ dict.dictLabel }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="是否参与排班" prop="schedulingFlag">
                            <el-radio-group v-model="form.schedulingFlag">
                                <el-radio
                                        v-for="dict in schedulingOptions"
                                        :key="dict.dictValue"
                                        :label="dict.dictValue"
                                        :value="dict.dictValue">{{ dict.dictLabel }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="邮箱" prop="email">
                            <el-input v-model="form.email" style="width:240px" placeholder="请输入用户邮箱" clearable size="small" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item style="width: 90%" label="擅长" prop="strong">
                            <el-input v-model="form.strong" type="textarea" placeholder="请输入用户擅长" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item style="width: 90%" label="荣誉" prop="honor">
                            <el-input v-model="form.honor" type="textarea" placeholder="请输入用户相关荣誉" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item style="width: 90%" label="简介" prop="introduction">
                            <el-input v-model="form.introduction" type="textarea" placeholder="请输入用户简介" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        name: "UserCenter",
        data(){
            return{
                form:{},

                disabled:true,
                //部门信息
                deptOptions: [],
                //系统状态信息
                statusOptions: [],
                //背景字典
                backgroundOptions:[],
                //性别字典
                sexOptions:[],
                //级别字典（学历）
                levelOptions:[],
                //排班字典
                schedulingOptions:[],
            }
        },
        methods:{
            //加载所有部门
            initDept() {
                this.$axios.get("/system/api/dept/list").then(r => {
                    this.deptOptions = r.data.t;
                })
            },
            //加载系统状态
            initStatus() {
                this.$axios.get("system/api/dict/data/findByType/sys_normal_disable").then(r => {
                    this.statusOptions = r.data.t;
                })
            },
            //加载性别字典
            initSex(){
                this.$axios.get("system/api/dict/data/findByType/sys_user_sex").then(r => {
                    this.sexOptions = r.data.t;
                })
            },
            //加载级别字典
            initLevel(){
                this.$axios.get("system/api/dict/data/findByType/sys_user_level").then(r => {
                    this.levelOptions = r.data.t;
                })
            },
            //加载学历字典
            initBackground(){
                this.$axios.get("system/api/dict/data/findByType/sys_user_background").then(r => {
                    this.backgroundOptions = r.data.t;
                })
            },
            //加载排班字典
            initScheduling(){
                this.$axios.get("system/api/dict/data/findByType/sys_yes_no").then(r => {
                    this.schedulingOptions = r.data.t;
                })
            },
            //查询用户信息
            initUserInfo(){
                this.$axios.get("system/api/user/info").then(r=>{
                    this.form=r.data.t;
                })
            },
        },
        created() {
            //加载所有部门
            this.initDept();
            //加载系统状态
            this.initStatus();
            //加载员工信息
            this.initUserInfo();
            //加载性别字典
            this.initSex();
            //加载级别字典
            this.initLevel();
            //加载学历字典
            this.initBackground();
            //加载排班字典
            this.initScheduling();
        }
    }
</script>

<style scoped>

</style>
